<template>
  <div class="body">
    <div id="container"></div>
    <!-- 控件 -->
    <div>
      <ul class="flex justify-between">
        <!-- <li>城市定位</li>
                <li>园林资产管理</li>
                <li>巡查记录</li>
                <li>园林审批</li> -->
      </ul>
    </div>
    <div class="control-menu flex justify-around items-center">
      <div>
        <span>选择城市：</span>
        <select v-model="cityID" @change="handleChange">
          <option value="0">选择城市</option>
          <option :value="item.code" :key="index" v-for="(item, index) in citys">{{
            item.name
          }}</option>
        </select>
        <select v-model="areaId">
          <option value="0">选择区县</option>
          <option :value="item.area_id" :key="index" v-for="(item, index) in areas">{{
            item.area_name
          }}</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import { getCity, getArea, getShops, getAddresscode } from '@/api/screen'
import { ref, watch } from 'vue'
import { object } from 'vue-types'
import { useShopData } from '@/store/screen'

let map = null
let citys = ref([])
let cityID = ref('0')
let areas = ref([])
let areaId = ref('0')
let shop_data = ref([])
// 备份amap
let currentAmap = null
// 监听城市编码

// marker位置商铺的具体信息
let currentShop = ref([])

// 状态机
const saveCity = useShopData()
const getShop = useShopData()
let shopItem = ref([])

const handleChange = (e) => {
  console.log('选项框事件', e.target.value)
  const currentCity = citys.value.filter((a) => {
    return a.code == e.target.value
  })
  saveCity.updataWeather(currentCity[0].name)
  console.log(currentCity[0].name)
}
onMounted(() => {
  // 获取城市列表
  getCity().then((res) => {
    let { hotcity, citycode } = res.data.result
    citys.value = hotcity
    // console.log("cityvalue", cityID.value)
    console.log('cityvalue', res.data)
  })

  // 配置高德地图
  AMapLoader.load({
    key: 'ef5c93096717f1cddf33a9af657b52af', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      currentAmap = AMap
      map = new AMap.Map('container', {
        // 设置地图容器id
        viewMode: '3D', // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [106.33342981, 29.61940705], // 初始化地图中心点位置
        mapStyle: 'amap://styles/blue' //设置地图的显示样式
      })
    })
    .catch((e) => {
      console.log(e)
    })
})

watch(cityID, (navl) => {
  console.log('cityvalue', navl)
  getArea(navl).then((res) => {
    areas.value = res.data.result
    console.log('上海', areas.value)
    let arr = Object.keys(areas.value).map((key) => {
      return {
        area_id: key,
        area_name: areas.value[key]
      }
    })
    areas.value = arr
    console.log('处理后的数组', arr)
  })
  areaId.value = '0'
})
// 监听区县
watch(areaId, (navl) => {
  console.log('区县', areaId.value)
  let address =
    citys.value.find((c) => c.code == cityID.value).name +
    areas.value.find((a) => a.area_id == areaId.value).area_name
  console.log('城市名称', address)

  // 清楚所有覆盖物
  map.clearMap()
  getShops(cityID.value, navl).then((res) => {
    let { shop_data } = res.data
    console.log('店铺信息2', shop_data)

    shop_data.forEach((e, idx) => {
      const icon = new currentAmap.Icon({
        size: new AMap.Size(30, 30), // 图标尺寸
        image: e.shop_ico, // Icon的图像
        imageSize: new AMap.Size(30, 30) // 根据所设置的大小拉伸或压缩图片
      })
      //创建一个 Marker 实例：
      const marker = new currentAmap.Marker({
        position: [e.map_longitude, e.map_latitude], //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: e.shop_name,
        icon,
        extData: {
          idx
        }
      })

      map.add(marker)
      // marker.setIcon(e.shop_ico);

      // 为每个marker设置点击事件
      marker.on('click', function (e) {
        // console.log("点击了这个点", e)
        // 点击打开事件框
        // 创建 infoWindow 实例
        console.log('marker', e.target.getExtData())
        let { idx } = e.target.getExtData()
        currentShop.value = shop_data[idx]
        console.log('当前商铺数据', currentShop.value)
        console.log('currentShops', currentShop.value.shop_name)
        // 点击当前marker将获取到的数据保存到状态机
        getShop.updataShop(currentShop.value)
        console.log('状态机里的商铺', getShop.shops)

        // marker提示信息
        //     var infoWindow = new currentAmap.InfoWindow({
        //         content: info.join("")  //传入 dom 对象，或者 html 字符串
        // });
        // infoWindow.open(map, e.target.getPosition());
      })
    })
  })
  // 获取经纬度
  getAddresscode(address).then((res) => {
    console.log('地理数据', res.data.geocodes)
    let { location } = res.data.geocodes[0]
    console.log('地理坐标', location)
    var position = location.split(',')
    map.setZoomAndCenter(13, position)
  })
})

onUnmounted(() => {
  map?.destroy()
})
</script>

<style lang="scss" scoped>
.body {
  position: relative;

  #container {
    width: 100%;
    height: 100%;
  }

  .control-menu {
    position: absolute;
    width: 100%;
    height: 30px;
    // background: blue;
    background: linear-gradient(to bottom, #081f34, #284361);
    bottom: 0;
    z-index: 999;
  }
}
</style>
